<template>
  <div class="look-subordinate">
     <div class="container" v-loading="loading">
         <div class="member-info">
            <div>
                <span>下级会员总数：</span><span v-html="member_total"></span><span>人</span>
            </div>
            <div>
                <span>实名人数：</span><span v-html="member_realname"></span><span>人</span>
            </div>
         </div>
         <div class="member-list" v-if="list.length !== 0">
             <table  border="0" cellspacing="0">
                 <thead class="member-header">
                     <th class="cell-label">序号</th>
                     <th class="cell-label">注册日期</th>
                     <th class="cell-label">真实姓名</th>
                     <th class="cell-label">手机号码</th>
                     <th class="cell-label">实名状态</th>
                     <th class="cell-label">商户状态</th>
                     <th class="cell-label">所属贴牌</th>
                 </thead>
                 <tbody>
                     <tr class="member-cell" v-for="(cell,index) in list" :key="index">
                         <td><div class="cell" v-html="index+1"></div></td>
                         <td><div class="cell" v-html="cell.createTime"></div></td>
                         <td><div class="cell" v-html="cell.fullName"></div></td>
                         <td><div class="cell" v-html="cell.phone"></div></td>
                         <td><div class="cell" v-html="cell.realNameStatus"></div></td>
                         <td><div class="cell" v-html="cell.shopsStatus"></div></td>
                         <td><div class="cell" v-html="cell.brandName"></div></td>
                     </tr>
                 </tbody>
             </table>
            <a class="loading-more" @click="loadingMore"> 加载更多……</a>
            
         </div>
         <div style="text-align:center;padding:16px" v-else>
            暂时还没有下级会员
         </div>
     </div>
  </div>
</template>

<script>

export default {
  name:'look-subordinate',
  props:{
      cell:{
          type:Object,
          default:function(){
              return {}
          }
      }
  },
  data () {
    return {
        loading:false,
        member_total:0,
        member_realname:0,
        list:[],
        size:10
    };
  },
  components: {},
  created() {
       this.init();
  },
  mounted() {},
  methods: {
      init(){
          this.loading = true;
          let url = `user/${this.cell.userid}/infos`;
          let params = `size=${this.size}`;
          this.$Http.post(url,params).then(res=>{
              if(res.data.resp_code === "000000"){
                  this.list = res.data.result.content || [];
                  this.member_total = res.data.result.totalElements || 0;
                  this.member_realname = res.data.result.realNameNumber || 0; 
              }else{
                  this.$message.info(res.data.resp_message)
              }
              this.loading = false;
          }).catch(err=>{
               this.$notify.error({
                    title: '出错啦',
                    message: "获取下级信息失败！"
                }); 
              this.loading = false
          })

      },
      loadingMore(){
          if(this.size>this.member_total){
              return;
          }
          this.size = this.size+10;
          let url = `user/${this.cell.userid}/infos`;
          let params = `size=${this.size}`;
          this.$Http.post(url,params).then(res=>{
              if(res.data.resp_code === "000000"){
                  this.list = res.data.result.content;
                  this.member_total = res.data.result.totalElements || 0;
                  this.member_realname = res.data.result.realNameNumber || 0;
              }
          }).catch(err=>{
              this.$notify.error({
                    title: '出错啦',
                    message: "获取信息失败！"
              }); 
          })
      },
  }
}

</script>
<style scoped>
.look-subordinate{
    min-width: 300px;
    min-height: 200px;
}
.container{
    padding: 20px;
}
.member-list table{
    width: 100%;
    border: 1px solid #efefef;
}
.member-list table tbody tr td{
    padding: 8px 0;
}
.member-header th{
    padding: 8px 0;
    background-color: #efefef;
}
.member-info{
    border-bottom: 1px solid #dfdfdf;
    padding: 10px 0;
}
.cell{
    text-align: center;
}
.loading-more{
    cursor: pointer;
    display: inline-block;
    padding: 8px;
    color: #66ccff;
}
</style>